import React, { Component } from "react";
import { connect } from "react-redux";
import MainLayout from "../../../component/mainLayout/mainLayout";
import "./index.scss";

// 优惠券选择页面
class Coupons extends Component {
	constructor(props) {
		super(props);
		this.state = {
			testArr: [
				{
					checked: false,
					detShow: false,
					detInfo: "这是详细信息1"
				},
				{
					checked: false,
					detShow: true,
					detInfo: "这是详细信息2"
				},
				{
					checked: false,
					detShow: false,
					detInfo: "这是详细信息3"
				}
			]
		};
	}

	componentDidMount() {
		setTimeout(() => {
			console.log(this.state);
		}, 1000);
	}

	// 详情显示
	detShowClick(index) {
		this.setState(function (state) {
			return {
				testArr: state.testArr.map((item, _index) =>
					_index == index ? { ...item, detShow: !item.detShow } : item
				)
			};
		});
	}

	// 选中项
	itemCheck(index) {
		this.setState(state => {
			return {
				testArr: state.testArr.map((_item, _index) =>
					_index == index ? { ..._item, checked: !_item.checked } : _item
				)
			};
		});
	}

	render() {
		const _pageParams = {
			header: {
				title: "选择优惠券"
			},
			history: this.props.history
		};
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="coupon-content">
					{this.state.testArr.map((item, index) => {
						return (
							<div className="coupon-item" key={index}>
								<div className="info-content">
									<div className="coupon-imgbox">
										<img
											src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592558511531&di=235d4b58000f8748a5fbea31058e50ee&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20151231%2FImg433120571.jpg"
											alt="优惠券logo"
										/>
									</div>
									<div className="content">
										<div className="name">全品类商品用（新用户专享）</div>
										<div className="price-info-content">
											<div className="price-info">
												<span>¥</span>
												<span className="large">10</span>满100可用
											</div>
											<div
												className={`select-icon ${
													item.checked ? "select-icon-active" : ""
												}`}
												onClick={this.itemCheck.bind(this, index)}
											></div>
										</div>
										<div className="date">2020.04.28至2020 05.28</div>
									</div>
								</div>
								<div
									className="tip"
									onClick={this.detShowClick.bind(this, index)}
								>
									<div className="info">详细信息</div>
									<div className="down-icon"></div>
								</div>
								{item.detShow && (
									<div className="detail">{item.detInfo || "无详细信息"}</div>
								)}
							</div>
						);
					})}
				</div>
			</MainLayout>
		);
	}
}
let CouponsPage = connect()(Coupons);
export default CouponsPage;
